<template>
	<view>
		<!-- 主体 -->
		<view class="page page-coin">
			<!-- 会员信息 -->
			<view class="coin-member">
				<view class="box flex-row-between">
					<view class="photo bg-cover" :style="{backgroundImage: 'url(' + userInfo.avatar + ')'}"></view>
					<view class="member font-ffffff flex-column-between" :class="{'flex-1': userInfo.extract == 0}">
						<view class="flex-row-start">
							<text class="font18">{{userInfo.name}}</text>
							<image class="level" :src="userInfo.card_ico ? (imgPath + userInfo.card_ico) : ''"></image>
						</view>
						<view class="font12 ellipsis">员工-{{userInfo.hotel}}</view>
						<view class="font12 tel">{{userInfo.mobile}}</view>
					</view>
					<view v-if="userInfo.extract" class="btn" @click="goNext('/pages/coin/reflect')">提现</view>
				</view>
				<!-- 头像模糊背景 -->
				<view class="bg"></view>
				<view class="bg-img bg-cover" :style="{backgroundImage: 'url(' + userInfo.avatar + ')'}"></view>
			</view>
			<!-- 金额统计 -->
			<view class="coin-number box-shadow flex-row-center">
				<view class="item flex-column-center" v-for="(item, index) in entry1" :key="index">
					<view class="font14 font-b">{{item.money}}</view>
					<text class="font11">{{item.title}}</text>
				</view>
			</view>
			<!-- 四宫格入口 -->
			<view class="coin-entry box-shadow flex-row-start flex-wrap">
				<view class="item flex-row-start" v-for="(item, index) in entry2" :key="index" @click="goNext(item.url)">
					<image class="icon" :src="item.img"></image>
					<view class="font11">
						<view class="p1">{{item.title}}</view>
						<view class="p2 font-969696">{{item.num}}</view>
					</view>
				</view>
			</view>
			<!-- 二维码 -->
			<view class="coin-er box-shadow">
				<view class="item flex-row-start" @click="openCode">
					<image class="icon icon1" src="https://static.newbeaconhotels.com/app/hotel/coin/vertical7.png"></image>
					<view class="font13">推广二维码</view>
				</view>
				<view class="item flex-row-start" @click="goNext('/pages/coin/record')">
					<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/coin/vertical8.png"></image>
					<view class="font13">纽扣币明细</view>
				</view>
			</view>
		</view>
		<!-- 画布 -->
		<l-painter ref="painter" width="500rpx" height="726rpx" :isH5PathToBase64="true" isRenderImage 
			@success="Onimgsuccess" custom-style="position: fixed; left: 500%;" />
		<!-- H5二维码 -->
		<!--  #ifdef  H5 -->
		<canvas canvas-id="qrcode" style="width: 280rpx;height: 280rpx;position: fixed; left: 500%;" />
		<!--  #endif -->
		<!-- 我的二维码 -->
		<uni-popup ref="code" type="center">
			<view class="home_code">
				<uni-icons class="close" type="close" color="#ffffff" size="24" @click="closeCode"></uni-icons>
				<!--  #ifdef  MP-WEIXIN -->
				<view class="homeC_box bg-cover">
					<image class="homeC_headimgurl" :src="userInfo.avatar"></image>
					<view class="font-1e1e1e font13">{{userInfo.name}}</view>
					<image class="homeC_wxcode" :src="wxcode"></image>
					<view class="font-646464 font12">扫码识别</view>
				</view>
				<view class="homeC_button font-ffffff font14 flex-row-center" @click="OnsaveImage">保存至相册</view>
				<!--  #endif -->
				<!--  #ifdef  H5 -->
				<image v-if="saveImageif" class="homeC_Image" :src="saveImage"></image>
				<view class="homeC_button font-ffffff font14 flex-row-center">长按图片保存至相册</view>
				<!--  #endif -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import lPainter from '@/components/lime-painter/'
	import { base64ToPath } from '@/js_sdk/mmmm-image-tools/index.js'
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default {
		components: { lPainter },
		data() {
			return {
				isLogin: false, // 是否已登录
				photo: 'https://static.newbeaconhotels.com/app/hotel/my/photo.png', // 默认头像
				imgPath: this.$Config.http_static, // 图片头
				imgAvatar: this.$Config.http_avatar, // 头像域名
				entry1: [
					{title: '已提现总金额', money: '0'},
					{title: '待审核提现金额', money: '0'},
					{title: '可提现佣金', money: '0'}
				],
				entry2: [
					{
						img: 'https://static.newbeaconhotels.com/app/hotel/coin/vertical5.png',
						title: '累计纽扣币',
						num: 0,
						url: '/pages/coin/total'
					},
					{
						img: 'https://static.newbeaconhotels.com/app/hotel/coin/vertical4.png',
						title: '分销订单',
						num: 0,
						url: '/pages/coin/order'
					},
					{
						img: 'https://static.newbeaconhotels.com/app/hotel/coin/vertical1.png',
						title: '提现明细',
						num: 0,
						url: '/pages/coin/detailed'
					},
					{
						img: 'https://static.newbeaconhotels.com/app/hotel/coin/vertical6.png',
						title: '有效会员',
						num: 0,
						url: '/pages/coin/member'
					}
				],
				// 用户信息
				userInfo: {},
				idInfo: {},
				// 分享
				h5share: true, // 当前页面是否单独获取签名
				wxSdk: false, // H5签名是否成功（此页面用于唤起扫一扫）
				wxcode: '', // 小程序二维码
				wxcodeh5: '', // H5二维码
				saveImageif: false, // 图片成功
				saveImage: '', // 画图图片
			}
		},
		onLoad: function(){
			// 从缓存中拿取各种id信息
			this.idInfo = uni.getStorageSync('idInfo')
			
			// #ifdef H5
			this.$wxapi.OnwxSdk().then(res => {
				if (res.code == 1) {
					this.wxSdk = true
					this.Onshare()
				} else {
					this.wxSdk = false
				}
			})
			// #endif
		},
		onShow: function() {
			// 获取用户信息
			let $token = uni.getStorageSync("token");
			if ($token) {
				this.$Http({
					url: 'coin',
					token: true,
					load: true
				}).then(res => {
					if (res.code == 1) {
						this.isLogin = true
						this.userInfo = res.data
						this.entry1[0].money = res.data.yt
						this.entry1[1].money = res.data.dt
						this.entry1[2].money = res.data.kt
						
						this.entry2[0].num = res.data.lj
						this.entry2[1].num = res.data.fx
						this.entry2[2].num = res.data.tx
						this.entry2[3].num = res.data.member
						
						// 获取二维码
						// #ifdef MP-WEIXIN
						this.OngetWxcode()
						// #endif
						
						// 获取H5二维码
						// #ifdef H5
						this.OnH5wxcode()
						// #endif
					}
				});
			} else {
				this.isLogin = false
			}
		},
		methods: {
			// 路由跳转: tag默认false,tag=true跳到tabBar页面
			goNext(url, tag) {
				if (tag) {
					uni.switchTab({ url: url });
				} else {
					uni.navigateTo({ url: url });
				}
			},
			// 打开我的二维码
			openCode() {
				if (this.isLogin) {
					this.$refs.code.open()
				} else {
					uni.showToast({ title: '请先登录', icon: 'none' });
				}
			},
			// 关闭我的二维码
			closeCode () {
				this.$refs.code.close()
			},
			//小程序获取二维码
			OngetWxcode() {
				let data = {};
				data.page = '/pages/common/login';
				
				// 员工分享的父id是自己
				let $P = this.userInfo.user_id;
				// 分享出去的来源id永远是自己的id
				let $F = this.userInfo.user_id;
				let $C = this.idInfo.Cid
				
				if ($C) {
					data.message_id = 'Pid.' + $P + ',Fid.' + $F + ',Cid.' + $C
				} else {
					data.message_id = 'Pid.' + $P + ',Fid.' + $F
				}
				
				this.$Http({
					url: 'getQrcode',
					data: data,
				}).then(res => {
					if (res.code == 1) {
						this.wxcode = res.data.replace(/[\r\n]/g, '') // 将回车换行换为空字符''
						// 画海报
						this.onCustom()
					}
				});
			},
			//H5海报二维码
			OnH5wxcode() {
				let that = this;
				let url = 'https://jd.newbeaconhotels.com/h5/jd/pages/common/login?scene=';
				let message_id = '';
				
				// 员工分享的父id是自己，会员分享的父id是终极父id
				let $P = this.userInfo.user_id;
				// 分享出去的来源id永远是自己的id
				let $F = this.userInfo.user_id;
				let $C = this.idInfo.Cid
				
				if ($C) {
					message_id = 'Pid.' + $P + ',Fid.' + $F + ',Cid.' + $C
				} else {
					message_id = 'Pid.' + $P + ',Fid.' + $F
				}
				
				console.log(url+message_id)
				uQRCode.make({
					canvasId: 'qrcode',
					text: url + message_id,
					size: uni.upx2px(280)
				}).then(res => {
					base64ToPath(res)
						.then(path => {
							that.wxcodeh5 = path
							that.onCustom()
						})
						.catch(error => {
							console.error(error)
						})
				}).finally(() => {
			
				})
			},
			//海报
			onCustom() {
				// 支持通过调用render传入参数
				const painter = this.$refs.painter
				var base = {
					width: '500rpx',
					height: '726rpx',
					views: [{
							type: 'image',
							src: 'https://static.newbeaconhotels.com/app/hotel/my/cbk.png',
							css: {
								left: '0rpx',
								top: '0rpx',
								width: '500rpx',
								height: '726rpx'
							}
						},
						{
							type: 'image',
							src: this.imgAvatar + this.userInfo.avatar2,
							css: {
								left: '210rpx',
								top: '110rpx',
								width: '80rpx',
								height: '80rpx',
								radius: '40rpx',
								background: '#ffffff',
							}
						},
						{
							type: 'text',
							text: this.userInfo.name,
							css: {
								width: '500rpx',
								textAlign: 'center',
								color: '#1e1e1e',
								left: '0rpx',
								top: '220rpx',
								fontSize: '26rpx'
							}
						},
						{
							type: 'text',
							text: '扫码识别',
							css: {
								width: '500rpx',
								textAlign: 'center',
								color: '#646464',
								left: '0rpx',
								top: '590rpx',
								fontSize: '24rpx'
							}
						},
					]
				}
				let code = {}
				// #ifdef MP-WEIXIN
				code = {
					type: 'image',
					src: this.wxcode,
					css: {
						left: '110rpx',
						top: '300rpx',
						width: '280rpx',
						height: '280rpx',
					}
				}
				// #endif
				// #ifdef H5
				code = {
					type: 'image',
					src: this.wxcodeh5,
					css: {
						left: '110rpx',
						top: '300rpx',
						width: '280rpx',
						height: '280rpx',
					}
				}
				// #endif
				base.views.push(code)
				painter.render(base)
			},
			//画布图片成功没有
			Onimgsuccess(res) {
				this.saveImage = res
				this.saveImageif = true
			},
			//保存
			OnsaveImage(res) {
				let that = this
				if (this.saveImageif) {
					uni.saveImageToPhotosAlbum({
						filePath: that.saveImage,
						success(res) {
							uni.showToast({ title: '已保存到相册', icon: 'success' })
							that.$refs.code.close()
						}
					})
				} else {
					uni.showToast({ title: '海报生成中~', icon: 'none' });
				}
			},
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
